<template>
  <div class="equip-tips-container">
    <el-scrollbar style="height: 340px">
      <div v-for="(item, index) in warnList" :key="index" class="equip-tips">
        <div class="equip-tips-item" :class="{ waring: item.type === 1 }">{{ item.content }}</div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
import { getDevice } from '@/api/home';
export default {
  data() {
    return {
      warnList: [],
    };
  },
  created() {
    this.getDeviceList();
  },
  methods: {
    getDeviceList() {
      const { projectId } = this.$store.getters;
      getDevice({ projectId }).then(res => {
        this.warnList = res.data || [];
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.equip-tips-container {
  flex: 1;
  overflow: hidden;
  .equip-tips {
    display: flex;
    flex-direction: column;
    align-items: center;
    .equip-tips-item {
      padding: 0 10px;
      width: 50%;
      color: #fff;
      font-weight: bold;
      font-size: 16px;
      height: 35px;
      line-height: 35px;
      background: #f59a23;
      box-shadow: 5px 5px 5px #9d9d9d;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &.waring {
        background: #d9001b;
      }
    }
    &:not(:last-of-type) {
      margin-bottom: 15px;
    }
  }
  ::v-deep {
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .el-scrollbar__view {
      height: 100%;
      display: grid;
      align-items: center;
    }
  }
}
</style>
